<template>
  <div class="standard-grid --padding-horizontal --auto-rows my-index">
    <div class="my-index__avatar">
      <span><img src="../../assets/imgs/logo.png" alt="avatar"></span>
      <span>Athena</span>
    </div>
    <common-list :lists="tabLists" :display="showModal"  @openModal="openModal"></common-list>
    <div class="my-index__logout" ref="logout" @click="logout"><span>退出登录</span></div>
    <share-modal :display="showModal" @hideModal="hideModal"></share-modal>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import CommonList from '../../components/common/common-list'
  import ShareModal from '../../components/common/share-modal'
  import {Prop} from "vue-property-decorator";
  @Component({
    components:{
      CommonList,
      ShareModal
    }
  })
  export default class MyIndex extends Vue {
    @Prop({required:true})skinValue

    private showModal=false
    private tabLists=[
      {title:'我的收藏',linkUrl:'/my/collect',isLink:true},
      {title:'个性换肤',linkUrl:'/my/skin',isLink:true},
      // {title:'夜间模式',linkUrl:'javascript:;'},
      {title:'分享音乐',linkUrl:'javascript:;'},
      {title:'关于',linkUrl:'/my/about',isLink:true}
    ]

    private themes=[
      { value:'0', background:'#054547'},
      { value:'1', background: '#5F5636'},
      { value:'2', background:'rgb(116, 3, 73)'},
      { value:'3', background:'#000'}
    ]

    private openModal(val){
      this.showModal=val
    }

    private hideModal(val){
      this.showModal=val
    }
    private logout(){
      // window.location.replace('/')
    }


    private mounted(){
      this.themes.map((item,index)=>{
        if(item.value==this.skinValue){
            this.$refs.logout.style.background=item.background
        }
      })
    }




  }
</script>
<style lang="scss">
  @include component(my-index){
     @extend %padding;

    @include part(avatar){
      grid-column: 1 / 2 span;
      display: flex;
      align-items: center;
      padding-bottom: $mobile-row-1;
      padding-top: $mobile-row-1;

      span{
        display: inline-block;

        &:nth-of-type(1){
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 2rem;
          box-shadow: 0 0 3px 2px #ccc;

          img{
            width: 100%;
            object-fit: cover;

          }
        }
      }
    }

    @include part(logout){
      grid-column: 1 / 2 span;
      @include loop-breakpoints{
        height: #{ $gridel-row-height * 4 + rem };
      }
      background: #054547;
      margin-top: $mobile-row-5;
      color: $color-fff;
      text-align: center;
      line-height: 300%;
      border-radius: 34px;
    }


  }
</style>
